<!-- 新选款推荐首页 -->
<style type="text/less" lang="less">
    .class-nav-style () {
        width: 36px;
        text-align: center;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 600;
    }
.ff-recommend-home {
    &-search {
        position: absolute;
        top: 10px;
        right: 0;
        width: 200px;
        height: 36px;
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 36px;
        padding-right: 10px;
        &-input {
            width: 190px;
            height: 100%;
            border: none;
            border-radius: 36px;
            padding-left: 10px;
            color: #575757;
        }
        .el-icon-search {
            font-size: 16px;
            color: #AAA;
            cursor: pointer;
        }
    }
    &-lists {

    }
    &-class {
        display: flex;
        border: 1px solid #DCDCDC;
        margin-bottom: 10px;
        &-display {
            width: 66%;
            &-title {
                height: 36px;
                line-height: 36px;
                padding-left: 11px;
                background-color: #F7F6F4;
                border-bottom: 1px solid #DCDCDC;
                font-size: 12px;
                font-weight: 400;
                color: #333;
                .title-class {
                    font-size: 14px;
                    margin-right: 19px;
                }
                label {
                    margin-right: 20px;
                    .ff-table__checkbox-input {
                        vertical-align: text-bottom;
                        margin-right: 10px;
                    }
                }
                .title-now, .title-sporadic, .title-warehouse, .title-target {
                    span {
                        font-size: 16px;
                        color: #FD6442;
                        margin-left: 17px;
                        vertical-align: bottom;
                    }
                }
                .title-sporadic, .title-warehouse,.title-now {
                    margin-left: 34px;
                }
            }
            &-lists {
                overflow-y: auto;
                max-height: 620px;
                box-sizing: border-box;
                padding-bottom: 13px;
                /deep/.ff-card {
                    display: inline-block;
                    margin: 13px 0 0 13px;
                    vertical-align: top;
                }
                .goods-checked {
                    display: block;
                    text-align: center;
                    padding: 10px 0 0;
                    span {
                        vertical-align: middle;
                    }
                    &-label {
                        margin-left: 10px;
                    }
                }
                .goods-commodity {
                    text-align: center;
                    color: #333;
                    padding: 8px 0px;
                    span {
                        margin-right: 6px;
                    }
                }
                .goods-ranking {
                    text-align: center;
                    color: #fd6422;
                    padding: 0 0 17px;
                    height: 29px;
                    box-sizing: border-box;
                    span {
                        margin-right: 3px;
                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
        &-choose {
            width: 34%;
            background-color: #FEFBF3;
            border-left: 1px solid #DCDCDC;
            position: relative;
            &-title {
                padding: 10px 16px;
                background-color: #fd6442;
                color: #fff;
                clear: both;
                .ff-table__checked_copy {
                    vertical-align: bottom;
                }
                .goods-choosable {
                    margin-left: 7px;
                    span {
                        font-size: 16px;
                        color: #fff;
                        font-weight: 400;
                        margin-left: 7px;
                    }
                }
                .watch-more {
                    font-weight: 400;
                    font-size: 12px;
                    float: right;
                    padding-top: 3px;
                    cursor: pointer;
                }
            }
            &-lists {
                overflow-y: auto;
                max-height: 620px;
                box-sizing: border-box;
                padding: 0 10px 10px;
                /deep/.ff-card {
                    display: inline-block;
                    margin: 10px 0 0 9px;
                    vertical-align: top;
                }
            }
            &-none {
                position: absolute;
                margin: auto;
                text-align: center;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 200px;
                height: 170px;
                p {
                    font-size: 14px;
                    color: #888;
                    font-weight: 400;
                }
            }
        }
    }
    &--nav {
        z-index: 4;
        position: fixed;
        left: 10px;
        top: 50%;
        transform: translateY(-48%);
        &-title {
            .class-nav-style ();
            color: #fff;
            background-color: #fd6442;
            line-height: 16px;
            padding: 2px 6px;
            margin-bottom: 10px;
            border-radius: 4px;
        }
        ul {
            li {
                background-color: #fff;
                &:first-child {
                    .ff-recommend-home--nav-label{
                        border-radius: 4px 4px 0 0;
                    }
                }
                &:last-child {
                    .ff-recommend-home--nav-label{
                        border-radius: 0 0 4px 4px;
                    }
                }
            }
        }
        &-label {
            .class-nav-style ();
            padding: 11px 0;
            color: #666;
            font-weight: 400;
            margin-top: -1px;
            position: relative;
            border: 1px solid #ddd;
            cursor: default;
            background-color: #fff;
            outline: none;
            transition: all .4s ease;
            &:hover {
                border: 1px solid rgba(253, 100, 66);
                background-color: rgba(253, 100, 66, .1);
                color: rgba(253, 100, 66);
                z-index: 1;
            }
        }
        &-active {
            border: 1px solid rgba(253, 100, 66);
            background-color: rgba(253, 100, 66, .1);
            color: rgba(253, 100, 66);
            z-index: 1;
        }
        &-tip {
            padding: 0 16px;
            font-weight: 400;
            font-size: 14px;
            line-height: 30px;
        }
    }
    &-go-top {
        .class-nav-style ();
        background-color: #eee;
        border-radius: 4px;
        margin-top: 30px;
        font-weight: 400;
        color: #666;
        padding: 9px 0;
        cursor: default;
        .iconfont {
            font-size: 20px;
        }
        span {
            margin-top: 4px;
            display: block;
        }
        &:hover {
            background-color: rgba(253, 100, 66);
            color: #fff;
        }
    }
}
</style>
<style type="text/less" lang="less" module>
    .nature-status () {
        position: absolute;
        top: 5px;
        left: -35px;
        width: 100px;
        height: 20px;
        line-height: 20px;
        transform: rotate(-45deg);
        transform-origin: center;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
        text-align: center;
    }
    .nature-logo () {
        position: absolute;
        right: 8px;
        top: 8px;
        padding: 5px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
    }
    /* 爆款 */
    .nature-hot {
        .nature-status();
        background-color: #fd6442;
    }
    /* 畅销 */
    .nature-best {
        .nature-status();
        background-color: #FFA31F;
    }
    /* 平销 */
    .nature-matters {
        .nature-status();
        background-color: #32CC44;
    }
    /* 滞销 */
    .nature-unsold {
        .nature-status();
        background-color: #9FA09F;
    }
    /* 新 */
    .nature-new {
        .nature-logo();
        background: #FF0000;
    }
    /* 零 */
    .nature-zero {
        .nature-logo();
        background: #FF8E1F;
    }
    /* 清 */
    .nature-clear {
        .nature-logo();
        background: #1F6EFF;
    }
    .ff-recommend-home-details-disabled {
        display: inline-block;
        box-sizing: border-box;
        vertical-align: bottom;
        border-radius: 2px;
        border: 1px solid #ccc;
        width: 15px;
        height: 15px;
        background-color: #ccc;
    }
</style>
<template>
    <div class="ff-recommend-home">
        <div class="ff-recommend-home-search">
            <input type="text" placeholder="请输入款号" class="ff-recommend-home-search-input" @keyup.enter="proSearch" v-model="querySearch" />
            <span class="el-icon-search" @click="proSearch"></span>
        </div>
        <more-screen @selection-id="selection" ref="moreScreen"></more-screen>
        <div class="ff-recommend-home-lists">
            <ul>
                <li class="ff-recommend-home-class" v-for="(list, index) of lists" :key="list.identifier" :ref="`${list.classCode}_${list.sexId}`" v-if="list.isShow">
                    <div class="ff-recommend-home-class-display">
                        <div class="ff-recommend-home-class-display-title">
                            <label>
                                <input type="checkbox" class="ff-table__checkbox" :checked="list.leftLists.checked" @change="chooseClassAll(list, 'leftLists')" :disabled="list.leftLists.disabled" />
                                <span class="ff-table__checkbox-input" :class="list.leftLists.disabled? $style['ff-recommend-home-details-disabled']: 'ff-table__checked_copy'"></span>
                                <span>{{list.display}}</span>
                            </label>
                            <span class="title-class">{{list.sex}} {{list.class}}</span>
                            <span class="title-target">目标款 <span>{{list.targetCount}}</span></span>
                            <span class="title-now">现有款 <span>{{list.now}}</span></span>
                            <span class="title-sporadic">零星款 <span>{{list.sporadic}}</span></span>
                            <span class="title-warehouse">可退款 <span>{{list.warehouse}}</span></span>
                        </div>
                        <div class="ff-recommend-home-class-display-lists">
                            <ff-card
                                v-if="item.isShow"
                                v-for="(item, i) of list.leftLists.arr"
                                :key="i"
                                :coverLeftText="item.sales"
                                :coverRightText="`￥${item.price}`"
                                :imgLists="item.images"
                                :code="item.pro"
                                :checked="item.checked"
                                @checkChange="checkSingleChange(list, item)"
                                isHoverActive
                            >
                                <div :class="item.clearClass? $style[item.clearClass] : ''" slot="tag">{{item.clearName}}</div>
                                <div :class="item.natureClass? $style[item.natureClass] : ''" slot="nature">{{item.natureName}}</div>
                                <label class="goods-checked">
                                    <input type="checkbox" class="ff-table__checkbox" :checked="item.checked" @change="checkSingleChange(list, item, 'leftLists')"  :disabled="item.disabled" />
                                    <span :class="item.disabled? $style['ff-recommend-home-details-disabled']: 'ff-table__checked_copy'"></span>
                                    <span class="goods-checked-label">退仓</span>
                                </label>
                                <div class="goods-commodity">
                                    <span>{{item.pro}}</span>
                                    <span>{{item.seasonName}}</span>
                                    <span>{{item.tag}}</span>
                                </div>
                                <div class="goods-ranking">
                                    {{item.label}}
                                </div>
                            </ff-card>
                        </div>
                    </div>
                    <div class="ff-recommend-home-class-choose">
                        <div class="ff-recommend-home-class-choose-title">
                            <label>
                                <input type="checkbox" class="ff-table__checkbox" :checked="list.rightLists.checked" @change="chooseClassAll(list, 'rightLists')" :disabled="list.rightLists.disabled" />
                                <span :class="list.rightLists.disabled? $style['ff-recommend-home-details-disabled']: 'ff-table__checked_copy'"></span>
                            </label>
                            <span class="goods-choosable">可补充款数 <span>{{list.choosable}}</span></span>
                            <!--<span class="watch-more" @click="watchMore(list)">查看更多》</span>-->
                        </div>
                        <div class="ff-recommend-home-class-choose-lists" v-if="list.rightLists.arr.length !== 0">
                            <ff-card
                                v-if="item.isShow"
                                v-for="(item, i) of list.rightLists.arr"
                                :key="i"
                                :coverLeftText="item.sales"
                                :coverRightText="item.weekAverage"
                                :collected="item.collect"
                                :nowPrice="item.price"
                                :oldPrice="item.dropPrice"
                                :count="item.count"
                                :checked="item.checked"
                                :season="item.seasonName"
                                :imgLists="item.images"
                                :displayPos="item.label"
                                :code="item.pro"
                                :disabled="item.disabled"
                                @checkChange="checkSingleChange(list, item, 'rightLists')"
                                @handleDelete="handleDelete(list, item, 'rightLists')"
                                @collectedClick="collectedClick(list, item, 'rightLists')"
                                showColl
                                isHoverActive
                            >
                                <div :class="item.clearClass? $style[item.clearClass] : ''" slot="tag">{{item.clearName}}</div>
                                <matrix
                                    slot="popover"
                                    :pro="item.pro"
                                    :name="item.name"
                                    :sizes="item.skuData.size"
                                    :items="item.skuData.data"
                                    @countChange="countChange($event, list, item, 'rightLists')"
                                    @changeCountCancel="changeCountCancel(list, item, 'rightLists')"
                                    @changeCountConfirm="changeCountConfirm($event, list, item, 'rightLists')"
                                ></matrix>
                            </ff-card>
                        </div>
                        <div class="ff-recommend-home-class-choose-none" v-else>
                            <img src="/static/images/none.png" alt="" />
                            <p>暂没有符合条件的款可推荐哦~</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="ff-recommend-home--nav">
            <div class="ff-recommend-home--nav-title">大类导航</div>
            <ul>
                <li v-for="(list, index) of navs" :key="index" @click="scrollClass(list)">
                    <el-popover
                        placement="right"
                        trigger="hover"
                    >
                        <div
                            slot="reference"
                            class="ff-recommend-home--nav-label"
                            :class="activeCode === index? 'ff-recommend-home--nav-active' : ''"
                        >{{list.code}}</div>
                        <span class="ff-recommend-home--nav-tip">{{list.title}}</span>
                    </el-popover>
                </li>
            </ul>
            <div class="ff-recommend-home-go-top" @click="goTop">
                <i class="iconfont icon-fanhui-copy-copy-copy-copy"></i>
                <span>回顶部</span>
            </div>
        </div>
        <submit-bar
            :checked="checked"
            :warehouseStyle="leftChooseStyle"
            :warehouseChoose="totalLeftChoose"
            :supplementStyle="rightChooseStyle"
            :supplementChoose="totalRightChoose"
            @handleAllChecked="handleAllChecked"
            @promptlySubmit="promptlySubmit"
        >
        </submit-bar>
        <confirm-dialog
            :content="dialog.content"
            :visible.sync="dialog.visible"
            :show-close="dialog.close"
            :title="dialog.title"
            :buttonName="dialog.buttonName"
            :cancelName="dialog.cancelName"
            :confirmName="dialog.confirmName"
            :tip="dialog.tip"
            @cancel="dialogCancel"
            @confirm="dialogConfirm"
        ></confirm-dialog>
    </div>
</template>

<script>
    import FfCard from '@/components/recommend/newGoodCard.vue'
    import moreScreen from '@/components/recommend/moreScreen.vue'
    import submitBar from '@/components/recommend/submitBar.vue'
    import confirmDialog from '@/components/dialog/confirmDialog.vue'
    import matrix from '@/components/recommend/matrix.vue'
    import { on, off, debounce } from '@/unit'
    let targetArr = [];
    export default {
        data() {
            return {
                dialog: {
                    visible: false,
                    title: '订单是否确认提交!',
                    tip: '',
                    close: true,
                    content: '',
                    cancelName: '取消',
                    confirmName: '确认'
                },
                activeCode: 0, // 大类激活
                querySearch: '', // 搜索字段
            }
        },
        components: {
            FfCard,
            moreScreen,
            submitBar,
            confirmDialog,
            matrix
        },
        computed: {
            /* 全选 */
            checked () {
                return this.$store.getters.homeChecked;
            },
            /* 选了多少退仓款 */
            leftChooseStyle () {
                return this.$store.getters.homeLeftStyle
            },
            /* 退仓款选了多少件 */
            totalLeftChoose () {
                return this.$store.getters.homeLeftCount
            },
            /* 选了多少可选款 */
            rightChooseStyle () {
                return this.$store.getters.homeRightStyle
            },
            /* 可选款选了多少件 */
            totalRightChoose () {
                return this.$store.getters.homeRightCount
            },
            /* 列表数据 */
            lists () {
                return this.$store.state.recommendHomeData;
            },
            /* 导航 */
            navs () {
                let data = {};
                this.$store.state.recommendHomeData.map(obj => {
                    if(obj.isShow) {
                        data[obj.classCode] = {
                            code: obj.classCode,
                            title: obj.class
                        }
                    }
                })
                return Object.keys(data).sort().map(key => data[key]);
            }
        },
        methods: {
            /* 搜索 */
            proSearch () {
                this.$refs.moreScreen.handleConfirm();
            },
            /*回到顶部*/
            goTop () {
                window.scrollTo({
                    left: 0,
                    top: 0,
                    // 采用平滑过渡实现
                    behavior: "smooth"
                })
            },
            /* 筛选 */
            selection (data) {
                targetArr = [];
                this.$store.commit('filterHomeData', {
                    ...data,
                    ...(this.querySearch == null? {} : {
                        querySearch: this.querySearch
                    })
                });
            },
            /* 加入或取消收藏夹 */
            collectedClick (list, item, target) {
                let status = item.collect;
                if(status) {
                    this.$http({
                        url: '/api/SelPro/UnMark',
                        method: 'post',
                        data: {
                            strId: this.$store.state.userId,
                            styList: [{
                                ps_C_PRO_ECODE: item.pro,
                                ps_C_PRO_ID: item.styId
                            }]
                        }
                    }).then(res => {
                        let data = res.data;
                        if(data.code === 1) {
                            this.$store.commit('homeCollect', {
                                classId: list.classId,
                                pro: item.pro,
                                sexId: list.sexId,
                                id: item.styId,
                                displayId: item.displayId,
                                target,
                                status: status
                            })
                            this.$message({
                                dangerouslyUseHTMLString: true,
                                iconClass: 'no-icon',
                                offset: 100,
                                customClass: 'succeed-collect-message',
                                message: '<span class="succeed-collect">取消加入收藏夹</span>'
                            });
                        }else {
                            this.$message.error('取消收藏失败!')
                        }
                    })
                }else {
                    this.$http({
                        url: '/api/SelPro/AddMark',
                        method: 'post',
                        data: {
                            strId: this.$store.state.userId,
                            styCodeList: [item.pro]
                        }
                    }).then(res => {
                        let data = res.data;
                        if(data.code === 1) {
                            this.$store.commit('homeCollect', {
                                classId: list.classId,
                                sexId: list.sexId,
                                pro: item.pro,
                                id: item.styId,
                                displayId: item.displayId,
                                target,
                                status: status
                            })
                            this.$message({
                                dangerouslyUseHTMLString: true,
                                iconClass: 'no-icon',
                                offset: 100,
                                customClass: 'succeed-collect-message',
                                message: '<span class="succeed-collect">成功加入收藏夹</span>'
                            });
                        }else {
                            this.$message.error('收藏失败!')
                        }
                    })
                }
            },
            /* 删除 */
            handleDelete (list, item, target) {
                this.dialog = {
                    visible: true,
                    title: '是否删除该款',
                    content: '',
                    confirm: 'confirmDelete',
                    param: {
                        list,
                        item,
                        target
                    }
                }
            },
            /*确认删除*/
            confirmDelete () {
                let { list, item, target } = this.dialog.param;
                this.$http({
                    url: '/api/SelPro/DelSelSty',
                    method: 'post',
                    data: {
                        strId: this.$store.state.userId,
                        styCode: item.pro
                    }
                }).then(res => {
                    let data = res.data;
                    if(data.code === 1) {
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            iconClass: 'no-icon',
                            offset: 100,
                            customClass: 'succeed-collect-message',
                            message: '<span class="succeed-collect">删除成功!</span>'
                        });
                        this.$store.commit('deleteHomeDetail', {
                            classId: list.classId,
                            sexId: list.sexId,
                            pro: item.pro,
                            id: item.styId,
                            displayId: item.displayId,
                            target
                        })
                    }
                })
            },
            /* 修改单个商品选中 */
            checkSingleChange (list, item, target) {
                let status = item.checked;
                this.$store.commit('changeHomeCheck', {
                    type: 'single',
                    classId: list.classId,
                    sexId: list.sexId,
                    pro: item.pro,
                    id: item.styId,
                    displayId: item.displayId,
                    target,
                    status
                })
            },
            /* 改变选中大类的所有可选款 */
            chooseClassAll (list, target) {
                let status = list[target].checked;
                this.$store.commit('changeHomeCheck', {
                    type: 'class',
                    sexId: list.sexId,
                    classId: list.classId,
                    displayId: list.displayId,
                    target,
                    status
                })
            },
            /* 全选改变 */
            handleAllChecked () {
                let status = this.checked;
                this.$store.commit('changeHomeAllCheck', status);
            },
            /* 提交弹框 */
            promptlySubmit () {
                this.dialog = {
                    visible: true,
                    close: true,
                    title: '订单是否确认提交?',
                    tip: '',
                    content: '',
                    confirm: 'confirmSubmit',
                    cancelName: '取消',
                    confirmName: '确认'
                }
            },
            /*取消*/
            dialogCancel () {
                if(this.dialog.cancel) {
                    this[this.dialog.cancel]();
                }
            },
            /*确认*/
            dialogConfirm () {
                if(this.dialog.confirm) {
                    this[this.dialog.confirm]();
                }
            },
            /* 现有款提交 */
            interface_now (arr) {
                return this.$http({
                    url: '/api/SelPro/Commit',
                    method: 'post',
                    data: {
                        queryCnt: 1,
                        strCode: this.$store.state.userCode,
                        strId: this.$store.state.userId,
                        styList: arr
                    },
                    noMessage: true//表示不要弹出公共的错误信息格式
                })
            },
            /* 退仓款提交 */
            interface_warehouse (arr) {
                return this.$http({
                    url: '/api/SelPro/SetStrStyBakCwhBill',
                    method: 'post',
                    data: {
                        strId: this.$store.state.userId,
                        styCodes: arr.join()
                    },
                    noMessage: true//表示不要弹出公共的错误信息格式
                })
            },
            /* 确认提交 */
            async confirmSubmit () {
                let leftArr = [], rightArr = [];
                this.lists.map(obj => {
                    if(!obj.leftLists.disabled) {
                        obj.leftLists.arr.map(n => {
                            if(n.disabled || !n.checked) return;
                            leftArr.push(n.pro);
                        })
                    }
                    if(!obj.rightLists.disabled) {
                        obj.rightLists.arr.map(n => {
                            if(n.disabled || !n.checked) return;
                            let pro = {
                                ps_C_PRO_ECODE: n.pro,//商品编码
                                ps_C_PRO_ID: n.styId,//商品id
                                skuList: []//sku明细
                            }
                            n.skuData.data.map(sku => {
                                sku.count.map(count => {
                                    if(count.new === 0) return
                                    pro.skuList.push({
                                        ps_C_SKU_ECODE: count.skuCode,
                                        ps_C_SKU_ID: count.skuId,
                                        qty_EXEC_PLAN: count.new,
                                    })
                                })
                            })
                            if(pro.skuList.length > 0) {
                                rightArr.push(pro)
                            }
                        })
                    }
                })
                if(rightArr.length === 0 && leftArr.length === 0) return this.dialog = {
                    visible: false,
                    close: true
                };
                let loading = this.$loading.service({
                    body: true,
                    lock: true,
                    text: '提交中',
                });
                let options = {
                    visible: true,
                    close: false,
                    title: '',
                    tip: '',
                    cancel: 'watchOrder',
                    confirm: 'refresh',
                    cancelName: '查看订单信息',
                    confirmName: '知道了'
                };
                let success = '', error = [];
                if(rightArr.length) {
                     await this.interface_now(rightArr).then(res => {
                         let data = res.data;
                         if(data.code === 1) {
                             success = '订单提交成功';
                         }else {
                             error.push(data.data.erromessage);
                         }
                     });
                }
                if(leftArr.length) {
                    await this.interface_warehouse(leftArr).then(res => {
                        let data = res.data;
                        data.message.map(n => {
                            if(n.type === 'false' && data.code !== 1) error.push(n.message);
                            if(n.type === 'succ' && data.code === 1) success = n.message;
                        })
                        options.tip = '提醒: 您有退仓订单请取POS"调拨出库单"执行发货';
                    });
                }
                loading.close();
                loading = null;
                if(success === '') {
                    this.dialog = {
                        visible: true,
                        close: true,
                        title: `${error.map(n => `<div style="color: red">${n}</div>`).join('')}`,
                        cancelName: '取消',
                        confirmName: '确认'
                    }
                }else {
                    this.dialog = {
                        ...options,
                        title: `${error.map(n => `<div style="color: red">${n}</div>`).join((''))}<div>${success}</div>`
                    }
                }
            },
            /* 查看订单 */
            watchOrder () {
                window.location.href = 'http://erp.fastfish.com/mall/PersonCenter/order?tab=first';
            },
            /* 刷新数据 */
            refresh () {
                let loading = this.$loading.service({
                    body: true,
                    lock: true,
                    spinner: 'el-icon-loading',
                    text: 'Loading',
                })
                setTimeout(() => {
                    loading.close();
                    loading = null;
                    this.$store.dispatch('getRecommendHomeData');
                }, 3000)
            },
            /* 缓存坐标 */
            cacheOffset () {
                if(targetArr.length === 0) {
                    let map = {};
                    this.lists.map(obj => {
                        if(!obj.isShow) return
                        if(!map[obj.classCode]) {
                            let key = `${obj.classCode}_${obj.sexId}`;
                            let target = this.$refs[key] && this.$refs[key][0];
                            let offsetTop = target.offsetTop;
                            map[obj.classCode] = {
                                code: obj.classCode,
                                offsetTop
                            }
                        }
                    })
                    targetArr = Object.keys(map).sort().map(key => map[key]);
                }
            },
            /* 大类导航激活 */
            classActive: debounce(200, function () {
                this.cacheOffset();
                let top = document.documentElement.scrollTop; // 现滚动距离
                targetArr.every((n, index) => {
                    let status = top >= n.offsetTop - 100;
                    if(status) this.activeCode = index;
                    return status
                })
            }),
            /* 滚动到指定的大类列表 */
            scrollClass ({ code }) {
                this.cacheOffset();
                let data = targetArr.find(n => n.code === code);
                if(data) {
                    let scrollTop = data.offsetTop - 50;
                    window.scrollTo({
                        left: 0,
                        top: scrollTop,
                        // 采用平滑过渡实现
                        behavior: "smooth"
                    })
                }
                /*let top = document.documentElement.scrollTop;
                const rate = 6;
                let animation = () => {
                    window.requestAnimationFrame(() => {
                        top += (scrollTop - top) / rate;
                        if(Math.abs(scrollTop - top) < 1){
                            return document.documentElement.scrollTop = scrollTop;
                        }
                        document.documentElement.scrollTop = top;
                        animation();
                    })
                }
                animation();*/
            },
            /* 修改数量 */
            countChange ({ style, k, j, status, count }, list, item, target) {
                if(status) {
                    this.$store.commit('addOrSubtractOfHome', {
                        style, // 加还是减
                        target,
                        classId: list.classId,
                        displayId: list.displayId,
                        sexId: list.sexId,
                        pro: item.pro,
                        id: item.styId,
                        k, // 颜色下标
                        j, // 尺寸下标(修改的第几个数量)
                        count // 需要修改的数据
                    })
                }
            },
            /*取消修改数量*/
            changeCountCancel (list, item, target) {
                this.$store.commit('refreshHomeSkuCount', {
                    classId: list.classId,
                    sexId: list.sexId,
                    displayId: list.displayId,
                    pro: item.pro,
                    id: item.styId,
                    target
                })
            },
            /*确认修改数量*/
            changeCountConfirm (total, list, item, target) {
                this.$store.commit('changeCountDialog');
                this.$store.commit('modifyHomeCommodityCount', {
                    classId: list.classId,
                    sexId: list.sexId,
                    displayId: list.displayId,
                    pro: item.pro,
                    id: item.styId,
                    target,
                    total
                })
            },
        },
        async mounted () {
            on(document, 'scroll', this.classActive);
            this.$nextTick(() => {
                let detailsLocation = this.$store.state.detailsLocation;
                if(detailsLocation) {
                    document.documentElement.scrollTop = detailsLocation;
                    this.$store.commit('recordLocation', 0);
                }
            })
            this.$once('hook:beforeDestroy', () => {
                off(document, 'scroll', this.classActive);
            })
        },
    }
</script>
